<template>
	<view class="bargain-container" :data-theme='theme()' :class="theme() || ''">
		<view class="top-box">
			<view class="inner-tab">
				<scroll-view scroll-X="true" show-scrollbar="false" class="scroll-X">
					<view class="tab-list">
						<view :class="bargain_activity_id == item.bargain_activity_id ? 'item active' : 'item'"
							v-for="(item, index) in categorys" :key="index"
							@click="tabTypeFunc(index, item.bargain_activity_id)">
							{{ item.title }}
						</view>
					</view>
				</scroll-view>
			</view>
			<!--图片-->
			<view class="banner-image d-c-c" v-if="listData.detail && categorys.length > 0">
				<image :src="listData.detail.file_path" mode="widthFix"></image>
			</view>
			<!--活动时间-->
			<view class="ad-datetime p-30-0 d-c-c pb20" v-if="listData.detail && categorys.length > 0">
				<Countdown ref="countdown" :config="countdownConfig" @returnVal="returnValFunc"></Countdown>
			</view>
			<view v-else class="p30 pt200 d-c-c d-c gray6 f26">
				<image style="width: 532rpx;margin-bottom: 80rpx;" src="/static/active-null.png" mode="widthFix">
				</image>
				<view class="tc gray9">暂无活动~~</view>
			</view>
		</view>
		<!--内容-->
		<view class="bargain-list" v-if="!loading">
			<!--列表-->
			<view class="list d-s-c f-w">
				<view class="item ww100 d-s-s d-stretch" v-for="(item, index) in listData.list" :key="index">
					<view class="product-cover pr">
						<image :src="item.product.file_path" mode="aspectFit"></image>
					</view>
					<view class="product-info d-c d-b-s">
						<view class="product-title text-ellipsis-2 f26 gray3">{{ item.product.product_name }}</view>
						<view class="d-b-e ww100">
							<view class="theme-price">
								<view class="f241">
									<text>最低:</text>
									<text class="f24">￥</text>
									<text class="f32 fb mb16">{{ item.bargain_price }}</text>
								</view>
								<view class="text-d-line gray9 f24">￥{{ item.product_price }}</view>
							</view>
							<view class="right-btn">
								<button class="theme-btn" @click="gotoDetail(item)"><text
										class="icon iconfont icon-kanjia1"></text>去砍价</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Countdown from '@/components/countdown/countdown.vue';
	export default {
		components: {
			Countdown
		},
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*活动类别*/
				categorys: [],
				/*当前活动Is*/
				bargain_activity_id: 0,
				/*商品列表*/
				listData: {
					list: [],
					detail: null
				},
				/*倒计时配置*/
				countdownConfig: {
					/*开始时间*/
					startstamp: 0,
					/*结束时间*/
					endstamp: 0
				},
				/*是否正在加载*/
				loading: true
			};
		},
		computed: {},
		onLoad(e) {},
		onShow() {
			/*获取产品列表*/
			this.getCategory();
		},
		onReachBottom() {},
		methods: {
			/*初始化*/
			/*类别切换*/
			tabTypeFunc(e, n) {
				this.type_active = e;
				this.bargain_activity_id = n;
				this.productList = [];
				this.getProdct();
			},

			/*获取数据*/
			getCategory() {
				let self = this;
				let param = {};
				let index = self.type_active;
				self._get(
					'plus.bargain.product/active', {
						param
					},
					function(res) {
						self.categorys = res.data.list;
						if (self.categorys.length > 0) {
							self.bargain_activity_id = self.categorys[0].bargain_activity_id;
						}
						self.getProdct();
					}
				);
			},

			/*获取商品*/
			getProdct() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				let bargain_activity_id = self.bargain_activity_id;
				self.loading = true;
				self._get(
					'plus.bargain.product/product', {
						bargain_activity_id: bargain_activity_id
					},
					function(res) {
						self.listData = res.data;
						self.countdownConfig.endstamp = res.data.detail.end_time;
						self.countdownConfig.startstamp = res.data.detail.start_time;
						uni.hideLoading();
						self.loading = false;
					}
				);
			},

			/*跳转产品详情*/
			gotoDetail(e) {
				this.$refs.countdown.clear();
				let url = 'pagesPlus/bargain/detail/detail?bargain_product_id=' + e.bargain_product_id;
				this.gotoPage(url);
			},

			/*跳转搜索页面*/
			gotoSearch() {
				this.page = 1;
				this.getData();
			},

			/*倒计时返回值*/
			returnValFunc(e) {
				console.log(e);
			}
		}
	};
</script>

<style lang="scss">
	.top-box {
		position: sticky;
		top: 0;
		left: 0;
		background: #f6f6f6;
		z-index: 10;
	}

	.bargain-container .inner-tab {
		background: #ffffff;
	}

	.bargain-container .inner-tab .tab-list {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #ffffff;
	}

	.bargain-container .inner-tab .item {
		height: 94rpx;
		line-height: 94rpx;
		white-space: nowrap;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.top-box .inner-tab .item.active,
	.top-box .inner-tab .item .arrow.active .iconfont {
		position: relative;
	}

	.top-box .inner-tab .item.active::after {
		content: '';
		width: 82rpx;
		height: 6rpx;
		@include background_color('background_color');
		border-radius: 3rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.bargain-container .inner-tab .box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.bargain-container .inner-tab .arrows {
		margin-left: 10rpx;
		line-height: 0;
	}

	.bargain-container .inner-tab .iconfont {
		line-height: 24rpx;
		font-size: 24rpx;
	}

	.bargain-container .inner-tab .arrow,
	.bargain-container .inner-tab .svg-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.bargain-container .banner-image {
		width: 100%;
		box-sizing: border-box;
	}

	.bargain-container .banner-image image {
		width: 750rpx;
		height: 365rpx;
	}

	.bargain-container .ad-datetime::v-deep text {
		color: #333333;
		font-size: 28rpx;
	}

	.bargain-list .ad-datetime::v-deep .box {
		padding: 4rpx;
		border-radius: 4rpx;
		@include background_color('background_color');
		color: #ffffff;
	}

	.bargain-list .list {
		padding: 20rpx;
	}

	.bargain-list .ad-datetime .box {
		padding: 4rpx;
		border-radius: 4rpx;
		background: #000000;
		color: #ffffff;
	}

	.bargain-list .list .item {
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #ffffff;
	}

	.bargain-list .product-cover {
		margin-right: 16rpx;
	}

	.bargain-list .product-cover image {
		width: 152rpx;
		height: 152rpx;
		border-radius: 20rpx;
	}

	.bargain-list .product-info {
		flex: 1;
		overflow: hidden;
	}


	.bargain-list .product-title {
		font-size: 28rpx;
		color: #333333;
	}

	.bargain-list .people-num {
		width: 100%;
	}

	.bargain-list .right-btn button {
		width: 182rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 56rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}

	.bargain-list .right-btn .icon.icon-kanjia1 {
		font-size: 26rpx;
		color: #ffffff;
		margin-right: 12rpx;
	}
</style>